<template>
  <div class="decoration-container">
    <dv-decoration-8 class="tech-decoration-left" :color="['rgba(0, 192, 255, 0.3)', 'rgba(0, 192, 255, 0.5)']" />
    <dv-decoration-8 class="tech-decoration-right" :reverse="true" :color="['rgba(0, 192, 255, 0.3)', 'rgba(0, 192, 255, 0.5)']" />
    <dv-decoration-3 class="tech-decoration-top" style="width:100%;height:5px;" />
    <dv-decoration-3 class="tech-decoration-bottom" style="width:100%;height:5px;" />
  </div>
</template>

<script>
export default {
  name: 'DecorationElements'
}
</script>

<style scoped>
.decoration-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.tech-decoration-left {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 50%;
}

.tech-decoration-right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 50%;
}

.tech-decoration-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.tech-decoration-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
</style>